<template>
  <div class="top">
    <!-- <el-input v-model="input" placeholder="添加列"></el-input>
    <el-button type="success" @click="clickHandle">添加</el-button> -->
    <el-select v-model="multiValue" collapse-tags multiple placeholder="选择列显隐">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item"></el-option>
    </el-select>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex"
export default {
  data() {
    return {
      input: "",
      options: [
        {
          value: "date",
          label: "日期",
        },
        {
          value: "name",
          label: "名字",
        },
        {
          value: "address",
          label: "地址",
        },
      ],
    }
  },
  computed: {
    ...mapState("tableStore", {
      tableSetting: state => state.tableSetting,
    }),
    multiValue: {
      set(value) {
        this.updateTableSetting(value)
      },
      get() {
        return this.tableSetting
      },
    },
  },
  methods: {
    ...mapMutations("tableStore", ["updateTableSetting"]),
  },
  created() {},
}
</script>
<style lang="less" scoped>
.top {
  .el-input {
    width: 200px;
  }
  .el-button {
    margin: 0 10px;
  }
}
</style>
